#Form 제출 후 formState 불일치 문제 해결 - useEffect와 reset() 사용하기

📅 2023. 03. 23

React Hook Form에서 handleSubmit은 비동기 함수이기 때문에 handleSubmit 안에서 reset을 실행하면 formState의 불일치가 일어날 수 있다. 컴포넌트가 다시 마운트되기 전 까지 input이 register되기 때문이다. 순서의 보장을 위해서 아래처럼 useEffect안에 formState가 success가 된 후에 reset을 실행하도록 로직을 구현하는게 권장된다.

아래는 공식 문서 에서 가져온 예제이다.

useEffect(() => {
  reset({
    data: 'test'
  })
}, [isSubmitSuccessful])

공식 문서에서도 Form 제출 후 reset을 하고 싶으면 useEffect에서 하는 걸 권장하고 있다.

It's recommended to reset inside useEffect after submission.